<script>
import DayCalendar from './DayCalendar.vue'
import MonthCalendar from './MonthCalendar.vue'

export default {
  name: 'VueWflCalendar',
  components: {
    DayCalendar,
    MonthCalendar
  },
  props: {
    //  主题
    theme: {
      type: String,
      default: 'white'
    },
    //  阴历
    showLanur: {
      type: Boolean,
      default: false
    },
    //  宽
    width: {
      type: Number,
      default: 500
    },
    //  高
    height: {
      type: Number,
      default: 500
    },
    //  月历
    isMonth: {
      type: Boolean,
      default: false
    },
    //  日历
    isDay: {
      type: Boolean,
      default: true
    },
    //  周历
    isWeek: {
      type: Boolean,
      default: false
    },
    //  鼠标移入显示详细信息
    enterShow: {
      type: Boolean,
      default: false
    },
    //  字体
    ffamily: {
      type: String,
      default: 'inherit'
    },
    dotDates: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      weekList: ['一', '二', '三', '四', '五', '六', '日'],
      monthList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
    }
  },
  mounted() {
  },
  methods: {
    toToday() {
      this.$refs.calendarRef?.toToday()
    },
    getDates() {
      return this.$refs.calendarRef?.getDates()
    }
  }
}
</script>

<template>
  <section>
    <DayCalendar
      v-if="isDay"
      ref="calendarRef"
      :ffamily="ffamily"
      :tmeme="theme"
      :width="width"
      :height="height"
      :show-lanur="showLanur"
      :dot-dates="dotDates"
      :week-list="weekList"
      @click-date="$emit('click-date', $event)"
      @to-today="$emit('to-today', $event)"
      @change-dates="$emit('change-dates', $event)"
    />
    <MonthCalendar
      v-else-if="isMonth"
      :ffamily="ffamily"
      :tmeme="theme"
      :width="width"
      :height="height"
      :show-lanur="showLanur"
      :month-list="monthList"
    />
  </section>
</template>

<style lang="sass" scoped>

</style>
